<template>
  <div style="width: 100%; height: 100%" ref="chartDomRef"></div>
</template>
<script setup>
import { ref, watch, onMounted, onBeforeUnmount, defineProps, defineExpose, defineEmits } from 'vue'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart, PieChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
import hmsTheme from './theme.json' // 引入默认主题
const emit = defineEmits(['chart-click'])
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  LineChart,
  BarChart,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
])
const props = defineProps({
  options: {
    type: Object,
    require: true,
    default: () => ({}),
  },
  dataParams: {
    type: Object,
    require: true,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false,
  },
})
const chartDomRef = ref()
let myChart = null
let observer = null
function initChart() {
  echarts.registerTheme('hmsTheme', hmsTheme)
  myChart = echarts.init(chartDomRef.value, 'hmsTheme')
  myChart.on('click', function (params) {
      // params 包含了点击事件的相关信息
    emit('chart-click', params);
      // 获取点击的系列（Series）的名称
      var seriesName = params.seriesName;

      // 获取点击的数据的索引
      var dataIndex = params.dataIndex;

      // 获取点击的数据的值
      var dataValue = params.value;

      // 根据需要处理点击事件，例如显示更多数据或执行特定操作
      // ...
  })
  observer = new ResizeObserver(() => {
    myChart.resize()
  })
  observer.observe(chartDomRef.value)
}
function render() {
  if (!myChart) {
    initChart()
  }
  myChart.setOption(props.options)
  myChart.hideLoading()
}
watch(
  () => props.options,
  () => {
    render()
  },
  { deep: true}
)
watch(
  () => props.loading,
  (val) => {
    if (myChart) {
      if (val) {
        myChart.showLoading()
      } else {
        myChart.hideLoading()
      }
    }
  },
  { immediate: true }
)
onMounted(() => {
  render()
})
onBeforeUnmount(() => {
  myChart && myChart.dispose()
  observer && observer.disconnect()
  observer = null
  myChart = null
})
</script>
